import * as THREE from 'three'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
import createApp from '../../core'

function createMeshStandardMaterial (dom: HTMLElement) {
  const { camera, scene } = createApp(dom)

  camera.position.set(-150, 100, 120)
  camera.lookAt(scene.position)

  const axes = new THREE.AxesHelper(100)
  scene.add(axes)

  const spotLight = new THREE.SpotLight(0xff0000)
  spotLight.position.set(100, 100, 100)
  spotLight.intensity = 0.8
  scene.add(spotLight)

  const planeGeo = new THREE.PlaneGeometry(200, 200)
  const planeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff })
  const mesh = new THREE.Mesh(planeGeo, planeMaterial)
  mesh.rotateX(-Math.PI / 2)
  scene.add(mesh)

  const loader = new OBJLoader()

  loader.load(
    // resource URL
    'https://vue-three.oss-cn-shanghai.aliyuncs.com/models/male02.obj',
    // called when resource is loaded
    function (object) {
      console.log(object)
      object.scale.set(0.1, 0.1, 0.1)
      scene.add(object)
    }
  )
}

export {
  createMeshStandardMaterial
}
